<template>
    <div w50rem h24rem p3 flex="~ col" justify-center items-center bg-dark>
        <div>
            <dv-scroll-ranking-board :config="computedConfig" style="width:400px;height:600px; margin-left: 10px" />
        </div>
    </div>
</template>
<script setup>
import { computed } from 'vue'
import _ from 'lodash'
const props = defineProps(["datalist"])
const computedConfig = computed(() => {
    const { datalist } = props
    const groundObj = _.groupBy(datalist,item=>item.company)
    const configData = []
    for(let item in groundObj){
        configData.push({
            name:item,
            value:groundObj[item].reduce((total,item)=>total+Number(item.salary),0)/groundObj[item].length
        })
    }
    return {
        data: configData,
        unit: '元',
        color:'yellow',
        fontSize:18
    }
})

</script>
<style scoped lang='scss'></style>